<script setup>
import { onMounted } from 'vue';

import mapboxGl from 'mapbox-gl';

import { usePlottingMapStore } from '#/store/modules/mapStore.js';

const mapStore = usePlottingMapStore();
const base = import.meta.env.VITE_GLOB_MAPBOX_ASSETS_IP;

// mapboxGl.accessToken =
//   'pk.eyJ1IjoibmluamFhIiwiYSI6ImNsYXYzd3JwaDAyMGwzdm44ZmI3M212eHQifQ.h_dGMMOvQXNfmheNd0_j8A';
let gmap;
const initMap = async () => {
  // mapboxgl.accessToken = 'p';
  mapboxgl.accessToken =
    'pk.eyJ1IjoibmluamFhIiwiYSI6ImNsYXYzd3JwaDAyMGwzdm44ZmI3M212eHQifQ.h_dGMMOvQXNfmheNd0_j8A';

  gmap = new mapboxgl.Map({
    container: 'map',
    zoom: 3,
    center: [118.9, 32.08],
    // style: {
    //   version: 8,
    //   sources: {
    //     localTiles: {
    //       type: 'raster',
    //       tiles: [`http://localhost:4000/tile?x={x}&y={y}&z={z}`], // 本地瓦片服务 URL
    //       tileSize: 256,
    //       minzoom: 0,
    //       maxzoom: 9,
    //     },
    //   },
    //   layers: [
    //     {
    //       id: 'localTilesLayer',
    //       type: 'raster',
    //       source: 'localTiles',
    //       minzoom: 0,
    //       maxzoom: 9,
    //     },
    //   ],
    // },
    // style: 'mapbox://styles/mapbox/streets-v11',
    style: {
        version: 8,
        sources: {},
        // glyphs: "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
        glyphs: `${base}/glyphs/fonts/{fontstack}/{range}.pbf`,
        sprite: `${base}/sprites/` + `mapstudio` + `/sprite`,
        layers: [],
      },
  });
};

onMounted(() => {
  initMap();
  window.startPlotting(mapboxGl, gmap, THREE, Threebox, mapStore);
});
</script>

<template>
  <div id="map" class="content-flex"></div>
</template>

<style scoped>
/* .header {
  position: fixed;
  top: 5vh;
  left: 5vw;
  z-index: 1;
  border: 1px solid white;
  border-radius: 5px;
} */

.content-flex {
  /* position: absolute; */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

:deep(.mapboxgl-ctrl-logo) {
  display: none !important;
}

:deep(.mapboxgl-ctrl-bottom-right) {
  display: none !important;
}
</style>
